<script lang="ts" setup>
import type { Filter } from '../types';

import { gameAssetManager } from '@/LcuApi/gameAsset'
import { selectModes } from '@/utils/dict';
import { defineEmits, defineProps, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';

const emits = defineEmits(['ok'])

const filter = ref<Filter>({
  modes: 'all',
  champion: 'all',
})

const { t } = useI18n()

function changeFilter() {
  emits('ok', filter.value)
}

const championList = ref([])
onMounted(async () => {
  const arr = await gameAssetManager.getChampions() || []
  championList.value = [{ id: 0, name: t(`ChampionSelect.all`) }, ...arr]
})
</script>

<template>
  <div class="history_filter_item">
    <div class="font-bold mr-10px">{{ t(`History.selectMode`) }}</div>
    <a-select v-model="filter.modes" :placeholder="t(`History.selectMode`)" class="w-150px" size="small"
      @change="changeFilter">
      <a-option v-for="item in selectModes" :key="item.name" :value="item.name">
        {{ t(`MatchHistoryModes.${item.name}`) }}
      </a-option>
    </a-select>
  </div>
  <div class="history_filter_item">
    <div class="font-bold mr-10px">{{ t(`History.selectMode`) }}</div>
    <a-select v-model="filter.champion" :placeholder="t(`History.selectMode`)" class="w-150px" size="small"
      @change="changeFilter">
      <a-option v-for="item in championList" :key="item.name" :value="item.name">
        {{ item.name }}
      </a-option>
    </a-select>
  </div>
</template>

<style lang="scss" scoped>
.history_filter_item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
</style>
